<template>
    <div class="ac-activity" v-if="activity.out_name">
        <page-title :title="activity.out_name"></page-title>
        <swiper :aspect-ratio="1/2" :show-dots="false" loop auto class="ac-swiper">
            <img :src="activity.main_view">

            <div class="ac-status">
                <span v-if="nowDate < activity.start_time && nowDate < activity.end_time" class="notbegun">未开始</span>
                <span v-else-if="activity.start_time <= nowDate && nowDate <= activity.end_time" class="underway">进行中</span>
                <span v-else-if="activity.end_time < nowDate && activity.start_time < nowDate" class="over">已结束</span>
            </div>
        </swiper>

        <article class="article ac-art">
            <div class="dt-header">
                <h2>{{activity.out_name}}</h2>
                <div class="ac-info" style="font-size:;">
                    <p class="daterange">时间:
                        <span v-if="activity.start_time">{{activity.start_time.replace(/-/g,"/") | formatTime('y/m/d h:i')}} - {{activity.end_time.replace(/-/g,"/") | formatTime('y/m/d h:i')}}</span>
                    </p>
                    <p class="site">地址:
                        <span>{{activity.location}}</span>
                    </p>
                </div>

            </div>
            <div class="rich-ctx" v-html="content">

            </div>
        </article>

        <div v-if="relatedList.length>0" class="about-list ac-related">
            <p class="title">
                <i class="iconfont icon-related"></i> 活动资料</p>
            <ul>
                <li v-for="(item,index) in relatedList" :key="index" class="about-list-li">
                    <!-- target_type(1.外链 2.资料包 3.领取资料 4.空) -->
                    <a :href="item.link" v-if="item.target_type==1">
                        <span>{{item.title}}</span>
                        <i class="iconfont icon-arrow-right"></i>
                    </a>
                    <router-link :to="item.wwlink?item.wwlink:item.link" v-if="item.target_type==2">
                        <span>{{item.title}}</span>
                        <i class="iconfont icon-arrow-right"></i>
                    </router-link>
                    <router-link :to="{ path: 'receivedata', query: { activityId: activityId }}" v-if="item.target_type==3">
                        <span>{{item.title}}</span>
                        <i class="iconfont icon-arrow-right"></i>
                    </router-link>
                    <a href="javascript:;" v-if="item.target_type==4">
                        <span>{{item.title}}</span>
                    </a>

                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import { Swiper } from 'vux';
import { getActivityById, findActivityFileByAcId } from '@/api/activity';
import { getPacketById } from '@/api/packet';
export default {
    data() {
        return {
            activityId: this.$route.query.activityId,
            eid: this.$route.query.eid,
            isScan: this.$route.query.isScan ? this.$route.query.isScan : 0,
            nowDate: +new Date(),
            content: '',
            activity: {
                id: null,
                status: null,
                create_time: '',
                start_time: '',   // 2017/12/16 14:42:0
                end_time: '',   // 2018/1/16 14:42:0
                main_view: '',
                out_name: null,
                location: ''
            },
            // 活动相关资料链接信息
            relatedList: []
        }
    },
    components: {
        Swiper
    },
    methods: {

    },
    created() {
        getActivityById(this.activityId, this.isScan).then(res => {
            if (res.activity.end_time) {
                res.activity.end_time = res.activity.end_time.replace(/-/g, '/')
            }
            this.activity = res.activity
            //根据资料包id获取富文本的内容
            if (res.activity.intro_packet_id) {
                getPacketById(res.activity.intro_packet_id).then(resp => {
                    this.content = resp.packet.rich_ctx
                }).catch(_ => {
                    console.log("获取资料包报错")
                })
            }
        }).catch(_ => {
            console.log("获取活动详情报错")
        })
        findActivityFileByAcId(this.activityId).then(res => {
            let newLink = []
            // 以#分割链接地址，路由只需要#号之后部分
            res.list.forEach(element => {
                if (element.target_type == 2) {
                    newLink = element.link.split("#")
                    element.link = newLink[1]
                }
            });
            this.relatedList = res.list
        }).catch(_ => {
            console.log("获取活动资料报错")
        })
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
